<!DOCTYPE html>

<style>
 span.spanLabel
 {
	font-type: verdana;
	font-size: 18px;
	font-weight: bold;
	color: blue;
	padding: 5px 5px 5px 5px;
	margin: 10px 10px 10px 10px;	
 }
 
 #divContentProduct
 {
	width:auto; 
	height:auto; 
	border:0px dotted green;
 }
 
 #divCategory
 {
	width:auto; 
	height:auto; 
	margin:10px 10px 10px 10px;
	border:1px solid yellow;
 }
 
 #inputCategory01
 {
    font-type: verdana;
	font-size: 12px;
	width:150px; 
 }
 
 #inputCategory02
 {
    font-type: verdana;
	font-size: 12px;
	width:150px; 
	display:none;
 }
 
 #inputCategory03
 {
    font-type: verdana;
	font-size: 12px;
	width:150px; 
	display: none;
 }
 
 #inputCategory04
 {
    font-type: verdana;
	font-size: 12px;
	width: 150px; 
	display: none;
 }
 
 #inputCategory05
 {
    font-type: verdana;
	font-size: 12px;
    display: none;
	width:200px; 
 }
 
 div.optionFieldGroup
 {
    font-type: verdana;
	font-size: 14px;
	font-style: bold;
	margin-top: 15px;
	margin-left: 5px;
	margin-bottom: 15px;
	margin-right: 5px;
	text-align: left;
	
 }
 
 div.OptionFieldUnSelected
 {
	font-type: verdana;
	font-size: 12px;
	border-radius: 15px;
	border-style: dotted;
	border-color: gray;
	margin-top: 5px;
	margin-left: 5px;
	margin-bottom: 5px;
	margin-right: 5px;
	text-align: center;
 }
 
 div.OptionFieldSelected
 {
	font-type: verdana;
	font-size: 12px;
	font-weight: bold;
	font-style: italic;
	border-radius: 0px;
	border-style: solid;
	border-color: gray;
	margin-top: 5px;
	margin-left: 5px;
	margin-bottom: 5px;
	margin-right: 5px;
	text-align: center;
 }

 div.ImageThumbnailHolder 
 {
	display: inline-block; 
	margin-top:5px; 
	margin-bottom:5px; 
	margin-left:5px; 
	margin-right:5px; 
	height:auto; 
	width:auto; 
	border:1px solid;
	text-align: center;
 }
 
 table.tabCart
 {
	width: 100%;
	font-type: verdana;
	font-weight: normal;
	font-size: 12px;
	border-collapse: collapse;
 }
 
 tr.trCart
 {
 }
 
 td.tdCartHeader
 {
	background: gray;
	color: white;
	font-weight: bold;
 }
 
 td.tdCartText
 {
	font-type: verdana;
	font-size: 12px;
	text-align: left;
	margin: 3px 3px 3px 3px;
	border: 1px solid gray;
 }
 
 td.tdCartNumber
 {
	font-type: verdana;
	font-size: 12px;
	text-align: right;
	margin: 3px 3px 3px 3px;
	border: 1px solid gray;
 }
 
 #imgFrontImage
 {
    margin-top:5px; 
	margin-bottom:5px; 
	margin-left:5px; 
	margin-right:5px; 
	width:120px; 
	border:1px solid green;
 }
 
 #imgRearImage
 {
    margin-top:5px; 
	margin-bottom:5px; 
	margin-left:5px; 
	margin-right:5px; 
	width:120px; 
	border:1px solid green;
 }
 
 #imgSideImage
 {
    margin-top:5px; 
	margin-bottom:5px; 
	margin-left:5px; 
	margin-right:5px; 
	width:120px; 
	border:1px solid green;
 }
 
 div.divProductSummary
 {
	float:left; 
	margin:10px 10px 10px 10px; 
	width:200px;
	border-radius: 30px;
	//background: gray;
	border: 2px solid green;
	font-type:verdana;
	font-size:12px;	
 }
 
 
</style>

<div style="text-align:center;">
 <script type="text/javascript" src="https://app.ecwid.com/script.js?2380026" charset="utf-8"></script>
	
 <!-- customised Browser Layout -->
 <table width="1200px" cellspacing="5" cellpadding="5" border="1">
  <tr>
   <!-- Content Area -->
   <td width="1000px" valign="top" align="center">  	   
    <div id="divContentProduct">   
    </div>	   
   </td>
   
   <!-- Navigation Area -->
   <td width="200px" valign="middle" align="left">
	<div id="divCategory">	    
	 <div>		 
	  <select id="inputCategory01" name="inputCategory01" onChange="loadCategory('inputCategory01','inputCategory02')"></select>
	 </div>
	 <br>
	 <div>		 
	  <select id="inputCategory02" name="inputCategory02" onChange="loadCategory('inputCategory02','inputCategory03')"></select>
	  </div>
	  <br>
	  <div>		 
	   <select id="inputCategory03" name="inputCategory03" onChange="loadCategory('inputCategory03','inputCategory04')"></select>
	  </div>
	  <br>
	   <div>		 
	    <select id="inputCategory04" name="inputCategory04" onChange="loadCategory('inputCategory04','inputCategory05')"></select>
	   </div>	   				   
	  </div>
	   
	  <br><br><br>
	  <div id="divCart" style=" width:auto; height:auto; margin:10px 10px 10px 10px; border:1px dotted yellow;">     
	   <script type="text/javascript"> xMinicart("style=","layout="); </script>	
	  </div>
	  <br><br><br>
	  <!--
	  <div id="divInformation" style="width:auto; height:auto; margin:10px 10px 10px 10px; border:1px dotted yellow;">
	   <div>
		<ul>
		 <li>
		  <a href="">Size Reference</a>
		  <br>
		 </li>	 
		 <li>
		  <a href="">Refund Policy</a>
		  <br>
		 </li>
		 <li>
		  <a href="">Exchange Policy</a>
		 </li>
		</ul>
	   </div>
	  </div>
	  -->
	  <!-- divInformation.END -->	    
	 </td>
	</tr>
	<tr>
	 <td colspan="2" valign="middle" align="center">
	  <!--<table width="100%" cellspacing="1" cellpadding="1" border="1">-->
	  <table class="tabCart">
	   <thead>
		<tr>
		 <td width="3%" class="tdCartText tdCartHeader">Line</td>   
		 <td width="5%" class="tdCartText tdCartHeader">Type</td>
		 <td width="30%" class="tdCartText tdCartHeader">SKU/Name/ID</td>	
		 <td width="10%" class="tdCartText tdCartHeader">Gender</td>
		 <td width="10%" class="tdCartText tdCartHeader">Colour</td>
		 <td width="10%" class="tdCartText tdCartHeader">Size</td>
		 <td width="10%" class="tdCartText tdCartHeader">Delivery </td>
		 <td width="5%" class="tdCartNumber tdCartHeader">Price</td>
		 <td width="5%" class="tdCartNumber tdCartHeader" >Qty</td>
		 <td width="12%" class="tdCartNumber tdCartHeader" >Total</td>
		</tr>    
	   </thead>
	   <tbody id="tableCartItemBody">
	   </tbody>
	  </table>
	 </td>
	</tr>
   </table>
   <!-- Customised Browser End -->


   <!-- Customised Product Dialog START -->
   <div id="productDetail" name="productDetail"> 	
	<table width="800px" cellspacing="5" cellpadding="5" border="0">
	 <tr>
	  <td width="600px" valign="middle" align="center">
	   <!-- ImageViewer -->
	   <div id="itemImgBig" style="margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px; height:400px; width:auto; border:1px solid;">  		
		<img id="imgMainImage" width="350px" src="" data-zoom-image="">				
	   </div>
	  </td>
	  <td  width="200px" valign="middle" align="left" rowspan="2">
	   <div style="height:600px; overflow: auto; border:1px solid">
	    <div id="divProductSKU" class="optionFieldGroup" style="display:none;">
		 <span style="margin-left:5px;">SKU</span>
		  <input type="hidden" id="INPUT.PRODUCT.IDX" value="-1">
		  <input type="hidden" id="INPUT.PRODUCT.SKU" value="">
		  <input type="hidden" id="INPUT.PRODUCT.ID" value="">
		  <input type="hidden" id="INPUT.PRODUCT.NAME" value="">
		 <div id="divProductSKUValue" style="margin-left:5px;">	  
		 </div>
		</div>   
		<div id="divProductPrice" class="optionFieldGroup">		 
		 <span style="margin-left:5px;">Price</span>
		 <input type="hidden" id="INPUT.PRODUCT.PRICE" value="0.00">
		 <div id="divProductPriceValue" style="margin-left:5px;">	
		 </div>
		</div>   
		<div id="divProductQty" class="optionFieldGroup">
		 <span style="margin-left:5px;">Quantity</span>
		 <div id="divProductQtyValue" style="margin-left:5px;">
		  <input id="INPUT.PRODUCT.QTY" size="10" maxlength="10" value="1" />
		 </div>
		</div>   
		<div id="divProductOptionStyle" class="optionFieldGroup">
		 <span class="Label">Type</span>
		 <input type="hidden" id="INPUT.PRODUCT.OPTION.STYLE.CHOICE" value="Polo Tee">
		 <input type="hidden" id="INPUT.PRODUCT.OPTION.STYLE.PRICE" value="0.00">
		 <div id="divProductOptionStyleValue" class="OptionValueSelected">
		 </div>
		</div>
		<div id="divProductOptionGender" class="optionFieldGroup">
		 <span class="Label">Gender</span>
		 <input type="hidden" id="INPUT.PRODUCT.OPTION.GENDER.CHOICE" value="gal">
		 <input type="hidden" id="INPUT.PRODUCT.OPTION.GENDER.PRICE" value="0.00">
		 <div id="divProductOptionGenderValue" class="OptionValueUnselected">	
		 </div>
		</div>
		<div id="divProductOptionColour" class="optionFieldGroup">
		 <span class="Label">Colour</span>
		 <input type="hidden" id="INPUT.PRODUCT.OPTION.COLOUR.CHOICE" value="">
		 <input type="hidden" id="INPUT.PRODUCT.OPTION.COLOUR.PRICE" value="0.00">
		 <div id="divProductOptionColourValue" class="Field">	
		 </div>
		</div>
		<div id="divProductOptionSize" class="optionFieldGroup">
		 <span class="Label">Size</span>
		 <input type="hidden" id="INPUT.PRODUCT.OPTION.SIZE.CHOICE" value="">
		 <input type="hidden" id="INPUT.PRODUCT.OPTION.SIZE.PRICE" value="0.00">
		 <div id="divProductOptionSizeValue" class="Field">	
		 </div>
		</div>
		<div id="divProductOptionShipment" class="optionFieldGroup">
		 <span class="Label">Shipping</span>
		 <input type="hidden" id="INPUT.PRODUCT.OPTION.DELIVERY.CHOICE" value="">
		 <input type="hidden" id="INPUT.PRODUCT.OPTION.DELIVERY.PRICE" value="0.00">
		 <div id="divProductOptionShipmentValue" class="Field">		
		 </div>
		</div> 
	   </div>	
	  </td>
	 </tr>
	 <tr>
	  <td>
	   <table widht="540px">
		<tr>
		 <td  width="180px" valign="middle" align="left">	  
		  <div id="itemImgFront" class="ImageThumbnailHolder">    	
		   <img id="imgFrontImage" src="" onClick="updateImageViewer('imgFrontImage');">		   
		  </div>
		  <br>
		  <span class="Label" style="text-align:center">Front</span>
		 </td>
		 <td  width="180px" valign="middle" align="center">	  
		  <div id="itemImgRear" class="ImageThumbnailHolder">
           <img id="imgRearImage" src="" onClick="updateImageViewer('imgRearImage');">		  
		 </div>
		 <br>
		 <span class="Label" style="text-align:center">Rear</span>
		 </td>
		 <td  width="180px" valign="middle" align="right">	  
		  <div id="itemImgSide" class="ImageThumbnailHolder">
           <img id="imgSideImage" src="" onClick="updateImageViewer('imgSideImage');">		  
		  </div>
		  <br>
		  <span class="Label" style="text-align:center">Side</span>
		 </td>	 
		</tr>
	   </table>
	  </td>
	 </tr>
	</table>
   </div>
	<!-- Customised Product Dialog END -->
	
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />	
	
	<script src="http://bcglobe-project1.googlecode.com/svn/jquery.elevateZoom-3.0.3.min.js"></script>
	<!--<script src="ecwid.js"></script>-->

	
	
<script>
  var globalProductApparelId = '28361230';
  var globalProductId = '';
  var globalProductPrice = 0;
  var globalProductQty = 0;
  var globalProductOptionStyle = '';
  var globalProductOptionColour = '';  
  var globalProductOptionGender = '';
  var globalProductOptionShipment = '';
  var globalCartName = 'cartItem';

  
 function insertCartItem(pItem)
 {
   var oCart = getCart();   
   oCart.push(pItem);
   saveCart(oCart);   
 }
 //
 //
 // 
 function getCartItem(pIndex)
 {
   var oCart = getCart()   
   return oCart[pIndex];
 }
 //
 //
 //
 function removeCartItem(pIndex)
 {
   var oCart = getCart();   
   oCart.splice(pIndex,1);
   saveCart(oCart);   
 }
 //
 //
 //
 function modifyCartItem(pIndex,pItem)
 {
    var oCart = getCart();
	oCart[pIndex] = pItem;
	saveCart(oCart);
	alert('Item #' + pIndex + ' Modified In Cart');
	showCart();
 }
 //
 //
 //
 function getCart()
 {
   /*
   var tmp = window.localStorage.getItem(globalCartName);   
   var oCart = [];
   if(tmp)
   {
     oCart = JSON.parse(tmp);
   }
   */
   
   var tmp = Storage[globalCartName];
   var oCart = [];
   
   if(tmp)
   {
     oCart = JSON.parse(tmp);
   }
   return oCart;
 }
 //
 //
 //
 function saveCart(pCart)
 {
	Storage[globalCartName] = JSON.stringify(pCart);
	showCart();
 }
 //
 //
 //
 function editCartItem(pIndex)
 {
	var oProduct = getCartItem(pIndex);	
	showProductDetail(oProduct.options.productId, oProduct,pIndex);	
 }
 //
 //
 //
 function loadCategory(pParentId,pChildId)
 {
	var parentId = $(document.getElementById(pParentId));
	var parentVal = parentId.val();
	var childId = $(document.getElementById(pChildId));
	var childId = $(document.getElementById(pChildId));
	
	childId.empty();
	childId.append(new Option("Select An Option",""));
	jQuery.getJSON
	( 
		"https://app.ecwid.com/api/v1/2380026/categories?parent=" + parentVal + "&callback=?", 
		function( data ) 
		{
		    if(data.length > 0)
			{
				childId.css("display","inline");
			}
			else
			{
				childId.css("display","none");
			}
			
			for(var i=0; i<data.length;i++)
			{
				childId.append(new Option(data[i].name,data[i].id));
			}
		}
	);
	
	loadProductList(parentVal);
	
 }
 //
 //
 // 
 function loadMainCategory(pCategoryId)
 {	
	$('#inputCategory01').empty();
	
	$("#inputCategory01").append(new Option("Select An Option",""));
	jQuery.getJSON
	( 
		"https://app.ecwid.com/api/v1/2380026/categories?parent=" + pCategoryId + "&callback=?", 
		function( data ) 
		{
			for(var i=0; i<data.length;i++)
			{		
				$('#inputCategory01').append(new Option(data[i].name,data[i].id));
			}
		}
	);	
 } 
 //
 //
 //
 function loadProductList(pCategoryId)
 { 
 
		var subCat = $("#subCategory").val();
		
		
		var url = "https://app.ecwid.com/api/v1/2380026/products?category=" + pCategoryId + "&hidden_products=true&secure_auth_key=ELXiWqZcGaTr" + "&callback=?";
		 
		$('#divContentProduct').empty();		 
		
		jQuery.getJSON
		( 
			url, 
			function( data ) 
			{			
				showProductList(data);
			}
		);		
 }
 //
 //
 //
 function showProductList(pData)
 { 			
	for(var i=0; i<pData.length; i++)
	{		
		var sContent = "";
		var itemPrice = 0;
		var itemId = pData[i].id;
		
		sContent = sContent + '<div id="divItem' + pData[i].id + '" class="divProductSummary">';
		sContent = sContent + ' <span class="spanLabel">' + pData[i].name + '</span>';
		sContent = sContent + ' <div><img src="' + pData[i].thumbnailUrl + '" width="140px" onClick="showProductDetail(\'' + pData[i].id + '\')"></div>';
		sContent = sContent + ' <span class="spanLabel">' + Ecwid.formatCurrency(pData[i].price) + '</span>';
		sContent = sContent + '</div>';	
		
		$("#divContentProduct").append(sContent);			
	}
 }
 //
 //
 //
 function showProductDetail(pProductId, pCartItem, pCartIndex)
 {
    var url = "https://app.ecwid.com/api/v1/2380026/product?id=" + pProductId + "&hidden_products=false&secure_auth_key=ELXiWqZcGaTr&callback=?";
			  
	jQuery.getJSON
	( 
		url, 
		function( data ) 
		{						
			$("#selectedItemId").val(data.id);
			
			globalProductId = data.id;
			globalProductPrice = data.price;
			$("#divProductSKUValue").html(data.sku);
			$(document.getElementById("INPUT.PRODUCT.SKU")).val(data.sku);
			$(document.getElementById("INPUT.PRODUCT.ID")).val(data.id);
			$(document.getElementById("INPUT.PRODUCT.NAME")).val(data.name);
			$(document.getElementById("INPUT.PRODUCT.PRICE")).val(data.price);
			$("#divProductPriceValue").html(Ecwid.formatCurrency(data.price));			
			
			var imgMain = $(document.getElementById('imgMainImage'));
			var imgFront = $(document.getElementById('imgFrontImage'));
			var imgRear = $(document.getElementById('imgRearImage'));
			var imgSide = $(document.getElementById('imgSideImage'));
			
			imgMain.attr("src","");
			imgMain.attr("data-zoom-image","");
			imgFront.attr("src","");
			imgRear.attr("src","");
			imgSide.attr("src","");
			
			if(data.galleryImages[0])
			{
				/*
				imgMain.attr("src",data.galleryImages[0].url);
				imgMain.attr("data-zoom-image",data.galleryImages[0].url);
				*/
				//$("#imgMainImage").elevateZoom();
				//imgMain.elevateZoom();
				imgFront.attr("src",data.galleryImages[0].url);
				updateImageViewer('imgFrontImage');
			}
			
			if(data.galleryImages[1])
			{
				imgRear.attr("src",data.galleryImages[1].url);				
			}
			
			if(data.galleryImages[2] != null)
			{			 
				imgSide.attr("src",data.galleryImages[2].url);							    				
			}
			
			$("#divProductOptionColourValue").parent().css("display","none");
			$("#divProductOptionSizeValue").parent().css("display","none");
			$("#divProductOptionStyleValue").parent().css("display","none");
			$("#divProductOptionGenderValue").parent().css("display","none");
			$("#divProductOptionShipmentValue").parent().css("display","none");
			
			for(var j=0; j<data.options.length; j++)
			{
				var sName = data.options[j].name;
				sName = sName.toUpperCase();
				
				switch(sName)
				{
					case 'COLOUR':
								  populateProductOption(data.options[j],"divProductOptionColourValue","inputProductOptionColour");
								  break;
								  
					case 'STYLE':
								  populateProductOption(data.options[j],"divProductOptionStyleValue","inputProductOptionStyle");
								  break;
					
					case 'GENDER':
								  populateProductOption(data.options[j],"divProductOptionGenderValue","inputProductOptionGender");
								  break;
								  
					case 'SIZE':
								  populateProductOption(data.options[j],"divProductOptionSizeValue","inputProductOptionSize");
								  break;

					case 'DELIVERY':
								  populateProductOption(data.options[j],"divProductOptionShipmentValue","inputProductOptionShipment");
								  break;
						
				}
			}
			$("#productDetail").dialog( "option", "title", data.name + " From $" + data.price)		
			
			if(pCartItem)
			{
			   updateProductOption('STYLE.CHOICE',pCartItem.options.styleChoice);
			   updateProductOption('GENDER.CHOICE',pCartItem.options.genderChoice);
			   updateProductOption('COLOUR.CHOICE',pCartItem.options.colourChoice);
			   updateProductOption('SIZE.CHOICE',pCartItem.options.sizeChoice);
			   updateProductOption('DELIVERY.CHOICE',pCartItem.options.deliveryChoice);
			   $(document.getElementById("INPUT.PRODUCT.IDX")).val(pCartIndex);
			}
		}
	);   	
	$( "#productDetail").dialog( "open" );
 }
 //
 //
 // 
 function populateProductOption(pOption, pTarget, pElement)
 {
   var sContent = '';
   var tmp = '';
   
   for(var i=0; i<pOption.choices.length; i++)
   {
	  tmp = "divProduct.Option." + pOption.name + ".choice." + pOption.choices[i].text;
	  tmp = tmp.toUpperCase();
	  sContent = sContent + 
				'<div id="' + tmp + '" class="OptionFieldUnSelected" ' +
					  'onClick="updateProductOption(\'' + pOption.name + '\',\'' + pOption.choices[i].text + '\',' + pOption.choices[i].priceModifier + ')" >' + 
				  ' ' + pOption.choices[i].text + 
				'</div>';
   }     
   //var div = $(document.getElementById(pTarget));
   //div.html(sContent);   
   var div = $(document.getElementById(pTarget));   
   if(pOption.choices.length > 0)
   {    
	 div.parent().css("display","inline");
     div.html(sContent);   
   }
   else
   {
    alert("hiding " + pTarget);
	div.parent().css("display","none");
   }
 }
 //
 //
 //
 function updateProductOption(pOptionName,pOptionValue,pOptionPrice)
 {
	// Get Current Option Value
	// Eg: INPUT.PRODUCT.OPTION.COLOUR.CHOICE
	
	var tmp = "input.Product.Option." + pOptionName + ".CHOICE";		
	tmp = tmp.toUpperCase();
	var inputId = $(document.getElementById(tmp));
	var oldValue = inputId.val();

	// DIVPRODUCT.OPTION.STYLE.CHOICE.ROUND-NECK-TEE
	var tmp = "divProduct.Option." + pOptionName + ".CHOICE." + oldValue;	
	tmp = tmp.toUpperCase();
	// Normalise Current Option Value css
	var id = $(document.getElementById(tmp));	
	id.attr('class','OptionFieldUnSelected');
	
	
	tmp = "divProduct.Option." + pOptionName + ".CHOICE." + pOptionValue;
	tmp = tmp.toUpperCase();
	
	id = $(document.getElementById(tmp));	
	id.attr('class','OptionFieldSelected');
	//id.css("border","1px solid");
	//id.css("background","grey");
	//id.empty();
	
	inputId.val(pOptionValue);
	tmp = inputId.val();
	
	tmp = "input.product.option." + pOptionName + ".price";
	tmp = tmp.toUpperCase();
	inputId = $(document.getElementById(tmp));
	inputId.val(pOptionPrice);
	
	updateProductPrice();
 }
 //
 //
 //
 function updateProductPrice()
 {
    var aOptionPrice = [];
	var sProductPrice = "INPUT.PRODUCT.PRICE";
	aOptionPrice[0] = "INPUT.PRODUCT.OPTION.STYLE.PRICE";
	aOptionPrice[1] = "INPUT.PRODUCT.OPTION.SIZE.PRICE";
	aOptionPrice[2] = "INPUT.PRODUCT.OPTION.GENDER.PRICE";
	aOptionPrice[3] = "INPUT.PRODUCT.OPTION.COLOUR.PRICE";
	aOptionPrice[2] = "INPUT.PRODUCT.OPTION.DELIVERY.PRICE";
	
	var lineTotal = $(document.getElementById(sProductPrice)).val();
	
	for(var i=0; i<aOptionPrice.length; i++)
	{
	   var id = $(document.getElementById(aOptionPrice[i]));	   
	   lineTotal = Number(lineTotal) + Number(id.val());
	}		
	$("#divProductPriceValue").html(Ecwid.formatCurrency(lineTotal));
 }
 //
 //
 // 
 function updateImageViewer(pImage)
 {    
    var img = $(document.getElementById(pImage));
	var src = img.attr("src");	
    var imgMain = $(document.getElementById("imgMainImage"));
	imgMain.attr("src",src);
	imgMain.attr("data-zoom-image","");
	imgMain.elevateZoom( 
						{
							zoomType: "inner",
							scrollZoom: true,
							zoomWindowWidth: "500px",
							cursor: "crosshair"												
						}
					   );

	
	//var ez =   imgMain.data('elevateZoom');	  	
    //ez.zoomImage = src;
 }
 //
 //
 // 
 function showCart()
 {
	$("#tableCartItemBody").empty();
	

		
	var aItems = getCart();
	var idx = 0;				
	
	for(idx=0; idx<aItems.length; idx++)
	{		
	    var lineTotal = 0;
		var linePrice = 0;
		var genderPrice = 0;
		var colourPrice = 0;
		var sizePrice = 0;
		var deliveryPrice = 0;
		
		if(aItems[idx].options.genderPrice)
		{ genderPrice = Number(aItems[idx].options.genderPrice); }
		
		if(aItems[idx].options.colourPrice)
		{ colourPrice = Number(aItems[idx].options.colourPrice); }

		if(aItems[idx].options.sizePrice)
		{ sizePrice = Number(aItems[idx].options.sizePrice); }

		if(aItems[idx].options.deliveryPrice)
		{ deliveryPrice = Number(aItems[idx].options.deliveryPrice); }

		
		linePrice = aItems[idx].price + 
		            genderPrice +
					colourPrice +
					sizePrice +
					deliveryPrice;
				
		lineTotal = linePrice * aItems[idx].quantity;
				lineTotal = Ecwid.formatCurrency(lineTotal);
		
		var iSequence = idx + 1;
		var sContent = 	'' +
						'<tr>' +
						' <td class="tdCartNumber">' + iSequence + '</td>' +
						' <td class="tdCartText">' + 'Apparel' + '</td>' + 
						' <td class="tdCartText">' + aItems[idx].options.productId.toUpperCase() + '<br>' + aItems[idx].options.sku.toUpperCase()+ '<br>' + aItems[idx].options.name.toUpperCase() + '</td>' +						
						' <td class="tdCartText">' + aItems[idx].options.genderChoice.toUpperCase() + '<br>' + Ecwid.formatCurrency(genderPrice) + '</td>' +
						' <td class="tdCartText">' + aItems[idx].options.colourChoice.toUpperCase() + '<br>' + Ecwid.formatCurrency(colourPrice) + '</td>' + 
						' <td class="tdCartText">' + aItems[idx].options.sizeChoice.toUpperCase() + '<br>' + Ecwid.formatCurrency(sizePrice) + '</td>' +
						' <td class="tdCartText">' + aItems[idx].options.deliveryChoice.toUpperCase() + '<br>' + Ecwid.formatCurrency(deliveryPrice) +'</td>' +
						' <td class="tdCartNumber">' + Ecwid.formatCurrency(aItems[idx].price) + '</td>' +
						' <td class="tdCartNumber">' + aItems[idx].quantity + '</td>' +
						' <td class="tdCartNumber">' + lineTotal + '</td>' +
						'</tr>';
						
		$("#tableCartItemBody").append(sContent);
			
		sContent = '<tr>' +
		           ' <td colspan="10" align="right">' + 
				   '  <input type="button" value="Edit" onClick="editCartItem(' + idx + ')">' + 
				   '  &nbsp;&nbsp;&nbsp;' +
				   '  <input type="button" value="Remove" onClick="removeCartItem(' + idx + ')">' +
				   '  <br><br>' +
				   ' </td>' +
				   '</tr>';
		$("#tableCartItemBody").append(sContent);					
	}		
 }
 //
 //
 //
 function loadEcwidCart()
 {
	var aItem = getCart();
	Ecwid.Cart.clear();
	for(var i=0; i<aItem.length; i++)
	{
		Ecwid.Cart.addProduct(aItem[i]);
	}
 } 
 //
 //
 //
 $(document).ready
 (
	function()
	{
	    var rootCategoryId = "6130010";
		loadMainCategory(rootCategoryId);		

		Ecwid.OnPageLoad.add
		(
			function(page) 
			{										
				$("#divImageCheckout").css("display","none");							
				
				if(page.type == 'CART')
				{
					loadEcwidCart();
				}
			}
		);
								 
		Ecwid.OnPageLoaded.add
		(
			function(page) 
			{										
				if(page.type == 'CART')
				{									  											
					$("#divImageCheckout").css("display","block");											
				}										
			}
		);
		
		
		$( "#productDetail" ).dialog({
				title: "Selected Item <name>",
				resizable: false,
				autoOpen: false,
			  width:'auto',
			  height:'auto',
			  modal: true,
			  buttons: 
			  { 
				"Add To Cart": function() 
				{	
				   sError = '';
				   
				   var id;
				   
				   id = $(document.getElementById("INPUT.PRODUCT.OPTION.STYLE.CHOICE"));
				   
				  if($(document.getElementById("INPUT.PRODUCT.OPTION.STYLE.CHOICE")).val() == "")
				  {
					sError = sError + 'Style Must Be Selected <br>';
				  }
				  
				  if($(document.getElementById("INPUT.PRODUCT.OPTION.GENDER.CHOICE")).val() == "")
				  {
					sError = sError + 'Gender Must Be Selected <br>';
				  }
				  
				  if($(document.getElementById("INPUT.PRODUCT.OPTION.COLOUR.CHOICE")).val() == "")
				  {
					sError = sError + 'Colour Must Be Selected <br>';
				  } 
				  
				  if($(document.getElementById("INPUT.PRODUCT.OPTION.SIZE.CHOICE")).val() == "")
				  {
					sError = sError + 'Size Must Be Selected <br>';
				  } 
				  
				  if($(document.getElementById("INPUT.PRODUCT.OPTION.DELIVERY.CHOICE")).val() == "")
				  {
					sError = sError + 'Delivery Must Be Selected <br>';
				  } 
				  if(sError != "")
				  {
					alert(sError);
					return;
				  }
					
				  var product =
				  {
					id: globalProductApparelId,
					price: globalProductPrice,
					quantity: $(document.getElementById("INPUT.PRODUCT.QTY")).val(),
					options:
					{	
						productId: $(document.getElementById("INPUT.PRODUCT.ID")).val(),		    
						name: $(document.getElementById("INPUT.PRODUCT.NAME")).val(),
						sku: $(document.getElementById("INPUT.PRODUCT.SKU")).val(),								
						styleChoice: $(document.getElementById("INPUT.PRODUCT.OPTION.STYLE.CHOICE")).val(),
						stylePrice: $(document.getElementById("INPUT.PRODUCT.OPTION.STYLE.PRICE")).val(),
						genderChoice: $(document.getElementById("INPUT.PRODUCT.OPTION.GENDER.CHOICE")).val(),
						genderPrice: $(document.getElementById("INPUT.PRODUCT.OPTION.GENDER.PRICE")).val(),
						colourChoice: $(document.getElementById("INPUT.PRODUCT.OPTION.COLOUR.CHOICE")).val(),
						colourPrice: $(document.getElementById("INPUT.PRODUCT.OPTION.COLOUR.PRICE")).val(),
						sizeChoice: $(document.getElementById("INPUT.PRODUCT.OPTION.SIZE.CHOICE")).val(),
						sizePrice: $(document.getElementById("INPUT.PRODUCT.OPTION.SIZE.PRICE")).val(),
						deliveryChoice: $(document.getElementById("INPUT.PRODUCT.OPTION.DELIVERY.CHOICE")).val(),
						deliveryPrice: $(document.getElementById("INPUT.PRODUCT.OPTION.DELIVERY.PRICE")).val()
					}
				   };   
				  
					var cartIndex = $(document.getElementById("INPUT.PRODUCT.INDEX")).val();
					if(cartIndex)
					{							  
					  modifyCartItem(cartIndex,product);
					}
					else
					{					
						//Ecwid.Cart.addProduct(product);
						insertCartItem(product);
					}													  
				  $( this ).dialog( "close" );
				},   
				Cancel: function() 
				{
				  $( this ).dialog( "close" );
				}
			  }
			});					
		
		showCart();				
	}
  );					

</script>

</div>




